<template>
  <div class="container-wrap">
    <div class="container-nav">
      <div class="webheart">
        <ul>
          <li
            v-for="v in btns"
            :key="v.id"
            :class="{ active: v.id == active }"
            @click="handleClick(v)"
          >
            {{ v.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="container-cont webheart">
      <el-container>
        <el-main style="padding: 0 20px 0 0">
          <el-card class="box-card" style="min-height: 500px">
            <QuestionAnswer v-show="active == 0" />
            <Review
              v-show="active == 1"
              :reviewObj="reviewObj"
              :showBtn="true"
            />
            <Note v-show="active == 2" />
          </el-card>
        </el-main>
        <el-aside width="320px">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>推荐课程</span>
            </div>
            <Recommend />
          </el-card>
        </el-aside>
      </el-container>
    </div>
  </div>
</template>
<script>
export default {
  components: {
    QuestionAnswer: () => import('./playContent/QuestionAnswer.vue'),
    // Review: () => import('@/components/review/index.vue'),
    Review: () => import('@/components/reviewNew/index.vue'),
    Note: () => import('./playContent/Note.vue'),
    Teachers: () => import('../detail/Teachers.vue'),
    Recommend: () => import('../detail/Recommend.vue'),
  },
  data() {
    return {
      active: 0,
      btns: [
        { id: 0, name: '问答' },
        { id: 1, name: '评论' },
        { id: 2, name: '笔记' },
      ],
      reviewObj: {
        pid: '0', //父级节点(评价类型不传)
        resId: this.$route.query.cId, //资源ID
        type: '1', //节点类型；1-评价，2-回复
        resType: '2', //资源类型；1-课程，2-知识点，3-…
      },
    }
  },
  props: ['courseId'],
  mounted() {},
  methods: {
    handleClick(row) {
      this.active = row.id
    },
  },
}
</script>
<style scoped lang="scss">
.container-wrap {
  width: 100%;
  min-height: 500px;
  padding-bottom: 40px;
  .container-nav {
    width: 100%;
    height: 68px;
    margin-bottom: 20px;
    background: #fff;
    box-shadow: 0 4px 8px 0 #ddd;
    ul {
      padding: 12px 16px;
      li {
        position: relative;
        float: left;
        margin-right: 96px;
        font-size: 16px;
        color: #545c63;
        line-height: 40px;
        cursor: pointer;
        font-weight: 700;
        &::before {
          display: none;
          content: ' ';
          position: absolute;
          width: 20px;
          height: 3px;
          background: red;
          bottom: 0;
          margin-left: -10px;
          left: 50%;
          border-radius: 2px;
        }
        &:hover,
        &.active {
          color: #f20d0d;
        }
        &.active::before {
          display: block;
        }
      }
    }
  }
}
</style>